1 個 div 和 4 行 CSS 就能更了解瀏覽器渲染引擎

@Martijn_Cuppens 寫了一個空的 div 還有幾行 CSS，這個 div 就能在瀏覽器上渲染出不同的圖形如下。

驚！勾起小弟一點好奇心，CSS 也可以做 browser，雖然使用 window 沒辦法使用 safari，來測試，而且 codepen 也不支持 IE，但還是利用手邊的瀏覽器還有一些服務像是 browserling, lambdatest 來測試。

Edge 的結果，這裡是使用 Microsoft Edge 44.18362.449.0 版本的 edge ，所以還沒有換到最新的基於 chromium 的版本。
Firefox 的結果，版本是 76
用 browserling ，firefox ver.68 在 window 7 上測試的結果是
chrome 的結果，版本是 84.0.4147.105
用 lambdatest 在 safari 10.1 上面測試的結果。~~codepen 就是傲嬌，嫌不支援又 render 出來~~
用 lambdatest 在 opera 68 上面測試的結果

結果大概是這樣。會有這些結果其實不意外，每個瀏覽器都有自已的渲染引擎，一個 HTML 跟 CSS 卻各自表態，所以實現出來的東西當然也是不一樣。不過厲害的是這個簡單的 CSS 竟然剛好可以在這些主流(?)瀏覽器上可以顯示不一樣的結果。

顯示結果與瀏覽器的關係？

為什麼不同的瀏覽器，但是 Render 的內容出來是一樣的？但有些相同瀏覽器，版本不同卻有不同的結果。

這就得講到剛剛提到的渲染引擎，渲染引擎的工作之一就是把 HTML 還有 CSS 的程式碼轉換成我們看的到的圖形介面。（其實這裡自己對渲染引擎還有很多不了解，有錯誤在麻煩各位提點。）

雖然是不同的瀏覽器，但如果使用相同的渲染引擎，那理所當然會渲染出同樣的畫面（像是筆電有各種牌子，但是作業系統都是 windows，所以畫面相同）。反之，就算是同樣的瀏覽器，可能因為開發成本過高或者是各種原因，不同的版本也可能使用不同的渲染引擎；抑或是引擎本身有更新，也會導致渲染出來的內容不一樣。

在不同版本更換渲染引擎這點，對前端開發最著名~~也是最可喜可賀~~的案例就是 Edge 吧。從 2020.1.15 開始，Edge 開始基於 Chromium 開發，理所當然地也沿用了 Chromium 的渲染引擎。

以前的 edge

新的 edge，跟 chrome 有 9 成像。而且之前 edge 獨有的功能都被拔掉了...

雖然沒有測試新版的 edge ，不過可想而知應該會得到相同的結果。

那既然提到了渲染引擎，那麼目前各瀏覽器的渲染引擎又是那些呢？其實可以從上面的結果大概知道有哪幾種引擎，我們先複習一下剛剛那張圖。

可以看到有 Firefox, Edge, Chrome, Safari, IE 這五種瀏覽器各呈現不同的方塊。也各代表不同的渲染引擎：

Firefox: Gecko
Edge：EdgeHTML
Chrome： Blink
Safari：WebKit
IE：Trident)

CSS prefix

知道有這些渲染引擎有甚麼用？還記得有時候我們會做下面這件事情。也就是幫 CSS 的屬性加上 prefix

-webkit-border-radius: ;
-moz-border-radius: ;
border-radius: ;

看到前面的 prefix： -webkit-, -moz- 可能覺得有些眼熟。是的，這些 prefix 就是要寫給渲染引擎看的。有一些比較新或者是還沒被廣泛應用的 CSS 屬性需要加上 prefix 才可以在特定的瀏覽器正常運作。

不過當去查資料時，會發現支援 chrome 還有 safari 的 prefix 都是 -webkit- ，這是因為 chrome 的引擎 Blink 是從 WebKit 分出來的。所以才會同樣使用 -webkit- ，不過由於實際上是不同的引擎，所以可能會遇到同樣的 CSS 屬性，webkit / Blink 引擎要加 prefix 但是另一個不用加的情形。

CSS 怎麼導致這種情形的？

講了那麼多，不過到底是甚麼屬性導致這些瀏覽器各自表態？我們看看 CSS 的原始碼。

html {
  display: table;
  height: 100%;
  width: 100%;
}

body {
  display: table-cell; 
  vertical-align: middle; 

div {
  margin: auto; 
  width: 100px;
  height: 100px;
  outline: inset 100px green;
  outline-offset: -125px;
}

去掉置中的屬性，真正有趣的是 div 裡面的下面四個。

div {
  width: 100px;
  height: 100px;
  outline: inset 100px green;
  outline-offset: -125px;
}

width 以及 height 賦予元素高度以及寬度。那 outline 做了些甚麼？我們看一下 MDN 上面的說法：

An outline is a line that is drawn around an element, outside the border.

outline 可以在 border 外面再加上邊框。而 outline 這個屬性是 outline-style, outline-width, outline-color 這三個屬性的簡寫。分別設定樣式、寬度還有顏色。案例中的 inset 代表著outline 會是嵌入狀的樣式。